<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery-3.6.3.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" >
    <link rel="stylesheet" href="css/adminLogin.css" >
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="wrap">
        <img src="img/登录页面背景.jpg" class="imgStyle">
        <div class="loginForm">
            <form>
                <div class="logoHead">
                    <h2 style="margin-top: 15px">高校勤工助学管理平台</h2>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="username" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="password" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>验证码:</label>
                    </div>
                    <div class="cardDiv">
                        <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                    </div>
                    <div class="codeDiv">
                        <input id="loginCode" class="layui-input codeInput"  type="button">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="submitLabel">
                        <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
                    </div>
                    <div class="submitDiv">
                        <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"/>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        layui.use(['layer'],function () {
            var layer = layui.layer;
        })

        layui.use(['form'],function (){
            var form = layui.form;
        })
        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登陆事件
            $('#loginBtn').click(function () {
                login();
            });
            // 注册事件
            $('#loginRegister').click(function () {
                register();
            });
        });
        // 生成验证码
        function createCode(codeID) {
            var code = "";
            // 验证码长度
            var codeLength = 4;
            // 验证码dom元素
            var checkCode = $(codeID);
            // 验证码随机数
            var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                'S','T','U','V','W','X','Y','Z'];
            for (var i = 0;i < codeLength; i++){
                // 随机数索引
                var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            // 将生成的随机验证码赋值
            checkCode.val(code);
        }
        // 校验验证码、用户名、密码
        function validateCode(inputID,codeID) {
            var inputCode = $(inputID).val().toUpperCase();
            var cardCode = $(codeID).val();
            var username = $('#username').val();
            var password = $('#password').val();
            if ($.trim(username) == '' || $.trim(username).length<=0){
                layer.alert("用户名不能为空");
            }
            if ($.trim(password) == '' || $.trim(password).length<=0){
                layer.alert("密码不能为空");
                return false;
            }
            if (inputCode.length<=0){
                layer.alert("验证码不能为空");
                return false;
            }
            if (inputCode != cardCode){
                layer.alert("请输入正确验证码");
                return false;
            }
            return true;
        }
        // 登录流程
        function login() {
            if (!validateCode('#loginCard','#loginCode')){
                //阻断提示
            }else {
                var loginUsername = $('#username').val();
                var loginPassword = $('#password').val();
                var params = {};
                params.username = loginUsername;
                params.password = loginPassword;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("正在登录...");
                $.ajax({
                    type:'post',
                    url:window.location.protocol+'//'+window.location.host+'/logins',
                    dataType:"json",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function (data) {
                        //console.log(123123);
                        layer.close(loginLoadIndex);
                        console.log(this.url)
                        // var jsonData = JSON.parse(data);
                        // console.log(jsonData.code);
                        //jsonData.code == '999'
                        if (data != null){
                            layer.msg('登录成功！', {icon: 4});
                            window.location.href = 'toindex';   //登录成功进行主页面
                        }
                    },
                    error:function () {
                        layer.close(loginLoadIndex);
                        layer.msg('账号或密码错误，请重新登录！', {icon: 5});
                        $('#loginBtn').val("登录");
                    }
                });
            }

        }
        // 注册流程
        // function register() {
        //     $.ajax({
        //         type:'get',
        //         url:window.location.protocol+'//'+window.location.host+'/toregister',
        //     });
        //
        // }



        //注册流程
        function register() {

            //存储当店选项卡页面，1表示求职者页面
            //2表示招聘单位页面
            var selectNowpage;

            //选项卡
            layui.use('element', function(){
                var element = layui.element;
                element.on('tab(demo)', function(data){
                    selectNowpage = data.index;
                    console.log(selectNowpage);
                    if(selectNowpage === 1){
                        var obj = document.getElementById("change1");
                        obj.className = "layui-tab-item layui-show";
                        var obj1 = document.getElementById("change2");
                        obj1.className = "layui-tab-item layui-hind";
                    }else if(selectNowpage === 2){
                        var obj = document.getElementById("change2");
                        obj.className = "layui-tab-item layui-show";
                        var obj2 = document.getElementById("change1");
                        obj2.className = "layui-tab-item layui-hind";
                    }

                });
            });

            layer.open({
                type:'1',
                content:$('.registerPage'),
                title:'注册',
                btnAlign: 'c',
                area:['1000px','500px'],
                btn:['注册','重置','取消'],
                btn1:function (index,layero) {
                    layer.close(index);
                    var registerUsername = $('#registerUsername').val();
                    var registerPassword = $('#registerPassword').val();
                    var registerWellPassword = $('#registerWellPassword').val();
                    var params = {};
                    params.username = registerUsername;
                    params.password = registerPassword;
                    var registerLoadIndex = layer.load(2);

                    var params2={};
                    if(selectNowpage === 1){
                        params.role = "student";
                        var registerQ_name = $('#q_name').val();
                        var registerQ_age = $('#q_age').val();
                        var registerSex = $('#sex').val();
                        var registerStu_id = $('#stu_id').val();
                        var registerGrade = $('#grade').val();
                        var registerMajor = $('#major').val();
                        var registerPhone_number = $('#phone_number').val();
                        params2.name = registerQ_name;
                        params2.age = registerQ_age;
                        params2.sex = registerSex;
                        params2.grade = registerGrade;
                        params2.major = registerMajor;
                        params2.phone_number = registerPhone_number;
                        params2.stu_id = registerStu_id;
                    }else if(selectNowpage === 2){
                        params.role = "recruiter"
                        var registerZ_name = $('#z_name').val();
                        var registerZ_age = $('#z_age').val();
                        var registerZ_sex = $('#z_sex').val();
                        var registerZ_phone_number = $('#z_phone_number').val();
                        var registerDepartment = $('#department').val();
                        params2.name = registerZ_name;
                        params2.age = registerZ_age;
                        params2.sex = registerZ_sex;
                        params2.phone_number = registerZ_phone_number;
                        params2.department = registerDepartment;
                    }
                    if(registerPassword !== registerWellPassword)
                    {
                        layer.alert("密码不一致！");
                        layer.close(layer.index); //疯狂模式，关闭所有层
                    }else{
                        $.ajax({
                            type:'POST',
                            url:window.location.protocol+'//'+window.location.host+'/register',
                            dataType:'html',
                            data:JSON.stringify(params)+'/'+
                                 JSON.stringify(params2),
                            contentType:'application/json',
                            success:function (data) {
                                layer.close(registerLoadIndex);
                                layer.msg(data);
                                if(data === "该账号已注册"){
                                    setTimeout(function() {
                                        // parent.layer.closeAll();
                                        // window.parent.location.reload();
                                        window.location.reload();
                                    }, 1500);

                                }
                            },
                            error:function () {
                                //console.log(data);
                                layer.close(registerLoadIndex);
                                layer.alert("请求超时！")
                            }
                        });
                    }
                },
                btn2:function (index,layero) {
                    //重置回调
                    var registerUsername = $('#registerUsername').val("");
                    var registerPassword = $('#registerPassword').val("");
                    var registerWellPassword = $('#registerWellPassword').val("");
                    $('#q_name').val("");
                    $('#q_age').val("");
                    $('#stu_id').val("");
                    $('#grade').val("");
                    $('#major').val("");
                    $('#phone_number').val("");
                    $('#z_name').val("");
                    $('#z_age').val("");
                    $('#z_phone_number').val("");
                    $('#department').val("");
                    // 防止注册页面关闭
                    return false;
                },
                btn3:function (index,layero) {
                    //取消回调
                    layer.closeAll(); //疯狂模式，关闭所有层
                },
            })

        }
    </script>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form class="layui-form layui-form-pane" >

            <div class="layui-form-item">
                <label class="layui-form-label">用&nbsp;户&nbsp;名:</label>
                <div class="layui-input-inline">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                <div class="layui-input-inline">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" type="password" name="username" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认密码:</label>
                <div class="layui-input-inline">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" type="password" name="username" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>


<!--            选择注册角色，根据不同角色输入不同注册信息-->
            <div class="layui-tab layui-tab-card layui-form-item" lay-filter="demo">

                <ul class="layui-tab-title">
                    <li class="layui-layer-btn">&nbsp;注册角色:</li>
                    <li class="layui-layer-btn" id="role1" value="求职者">求职者</li>
                    <li  class="layui-layer-btn" id="role2" value="招聘单位">招聘单位</li>
                </ul>
                <div class="layui-tab-content" style="height: 120px;">
                    <div class="layui-tab-item layui-hide">
                    </div>

<!--                    求职者角色-->
                    <div id="change1" class="layui-tab-item layui-hide ">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名:</label>
                            <div class="layui-input-inline" >
                                <input id="q_name" type="text" name="q_name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">年龄:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <input id="q_age" type="number" name="q_age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <select name="sex" id="sex" lay-verify="">
                                    <option value="">性别</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学号:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <!--                                <i class="layui-icon layui-icon-username adminIcon"></i>-->
                                <input id="stu_id" type="text" name="stu_id" required lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">年级:</label>
                            <div class="layui-input-inline " >
                                <!--                                <i class="layui-icon layui-icon-user adminIcon"></i>-->
                                <input id="grade" type="text" name="grade" required lay-verify="required" placeholder="请输入年级，如2019级" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">专业:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <!--                                <i class="layui-icon layui-icon-username adminIcon"></i>-->
                                <input id="major" type="text" name="major" required lay-verify="required" placeholder="请输入专业" autocomplete="off" class="layui-input">
                            </div>

                            <label class="layui-form-label">电话:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <!--                                <i class="layui-icon layui-icon-username adminIcon"></i>-->
                                <input id="phone_number" type="text" name="phone_number" required lay-verify="required" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

<!--                    招聘单位角色-->
                    <div id="change2" class="layui-tab-item layui-hide">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名:</label>
                            <div class="layui-input-inline" >
                                <input id="z_name" type="text" name="z_name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">年龄:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <input id="z_age" type="number" name="z_age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <select name="sex" id="z_sex" lay-verify="">
                                    <option value="">性别</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">电话:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <!--                                <i class="layui-icon layui-icon-username adminIcon"></i>-->
                                <input id="z_phone_number" type="text" name="z_phone_number" required lay-verify="required" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                            </div>

                            <label class="layui-form-label">单位名称:</label>
                            <div class="layui-input-inline layui-col-md4">
                                <!--                                <i class="layui-icon layui-icon-username adminIcon"></i>-->
                                <input id="department" type="text" name="department" required lay-verify="required" placeholder="请输入单位名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</html>
